<template>
  <div class="mark">
    <x-header :left-options="{showBack: true,  backText:''}">添加备注<a slot="right" @click="mark">完成</a></x-header>
      <section class="mark-wrap">
        <textarea name="" placeholder="请输入备注，最多50字哦" v-model="info">
        </textarea>
        <div class="numinfo"><span>{{have}}</span>/<span>50</span></div>
      </section>

    <!--BEGIN toast-->
      <div class="layer" v-show="layshow">{{laymsg}}</div>
    <!--end toast-->
  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  },
  data() {
    return {
      info:null,
      layshow:false,
      laymsg:'',
      have:0,
    }
  },
  mounted() {
    this.info = this.$store.state.mark;
  },
  watch:{
    info(curVal,oldVal) {
      if(this.info.length<=50){
        this.have = this.info.length;
      }else{
        this.layer(true,'最多只能输入50个字符');
        this.info = this.info.substring(0,50);
      }
    }
  },
  methods:{
    layer(bool,msg){
      var _this = this;
      this.layshow = bool;
      this.laymsg = msg;
      setTimeout(function(){
        _this.layshow = false;
      },1000)
    },
    write(){
      this.have = this.info.length; 
      this.num = this.num - this.info.length;
    },
    mark(){
      if(this.info.length>50){
        this.layer(true,'最多只能输入50个字符');
      }else{
        this.$store.commit('MARK_BUY',this.info);
        this.$router.push({path:'/dist/Buycom'});
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.mark{
  position: relative;
}
.mark textarea{
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  margin-top:7rem;
  margin-left:5%;
  width:90%;
  background-color:#fff;
  height:12rem;
  border-radius:8px;
  color:#969696;
  border:none;
  padding:1rem;
  resize: none;
}
.numinfo{
  position: absolute;
  bottom:1rem;
  right:5%+2rem;
  color:#969696;
}
</style>